import { PageContainer } from '@ant-design/pro-components';
import { useModel } from '@umijs/max';
import {Button, Card, Descriptions, Form, message, Input, Divider} from 'antd';
import React, {useEffect, useState} from 'react';
import {
  getInterfaceInfoByIdUsingGET, invokeInterfaceInfoUsingPOST,

} from "@/services/yuapi-backend/interfaceInfoController";
import {useParams} from "@@/exports";


/**
 * 主页
 *
 * @constructor
 */
const Index:React.FC = () => {

  const [loading, setLoading] = useState(false);
  const [data, setData] = useState<API.InterfaceInfo>();
  const [invokeRes,setInvokeRes] = useState<any>();
  const params = useParams();
  const [invokeLoading, setInvokeLoading] = useState(false);
  const loadData = async () =>{
    if (!params.id){
      message.error('参数不存在');
      return;
    }
    setLoading(true);
    try {
      const res = await getInterfaceInfoByIdUsingGET({
        id:Number(params.id)
      });
      setData(res.data);

    }catch (error:any){
      message.error('请求失败.'+error.message);
    }
    setLoading(false);
  }
  useEffect(()=>{
    loadData();
  },[])
  const onFinish =async (values: any) => {
    if (!params.id){
      message.error('接口不存在');
      return;
    }
    setInvokeLoading(true);
    try {
      const res =await invokeInterfaceInfoUsingPOST({
        id: params.id,
        ...values
      });
      setInvokeRes(res.data);
      message.success('请求成功');
    } catch (error:any) {
      message.error('请求失败!'+error.message);
    }
    setInvokeLoading(false);
  };
  return(
    <PageContainer title="查看接口文档">
      <Card>
        {data?(
          <Descriptions title={data.name} column={1}>
            <Descriptions.Item label="接口状态">{data.status?'正常':'关闭'}</Descriptions.Item>
            <Descriptions.Item label="描述">{data.description}</Descriptions.Item>
            <Descriptions.Item label="请求地址">{data.url}</Descriptions.Item>
            <Descriptions.Item label="请求方法">{data.method}</Descriptions.Item>
            <Descriptions.Item label="请求参数">{data.requestParams}</Descriptions.Item>
            <Descriptions.Item label="请求头">{data.requestHeader}</Descriptions.Item>
            <Descriptions.Item label="响应头">{data.responseHeader}</Descriptions.Item>
            <Descriptions.Item label="更新时间">
              {
                data.updateTime
              }
            </Descriptions.Item>
            <Descriptions.Item label="创建时间">
              {
                data.createTime
              }
            </Descriptions.Item>
          </Descriptions>
        ):(
          <>接口不存在</>
        )}
      </Card>
      <Divider />
      <Card title={"在线测试"}>
        <Form
          name="invoke"
          layout={"vertical"}
          onFinish={onFinish}

        >
          <Form.Item
            label="请求参数"
            name="userRequestParams"
          >
            <Input.TextArea />
          </Form.Item>
          <Form.Item wrapperCol={{ span: 16 }}>
            <Button type="primary" htmlType="submit">
              调用
            </Button>
          </Form.Item>
        </Form>
      </Card>
      <Divider />
      <Card title="返回结果" loading={invokeLoading}>
        {invokeRes}
      </Card>
    </PageContainer>
  );
};

export default Index;
